﻿@namespace Bit.BlazorUI
@inherits BitComponentBase
@typeparam TItem

<CascadingValue Value="this" IsFixed="true">
    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
</CascadingValue>


<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()">
    <button @onclick="() => HandleOnHeaderClick(Sticky ? SelectedItem : null)"
            type="button"
            tabindex="@(IsEnabled ? 0 : -1)"
            aria-label="@AriaLabel"
            aria-hidden="@AriaHidden"
            aria-describedby="@AriaDescription"
            style="@GetStyle(SelectedItem);@Styles?.OperatorButton"
            class="bit-mnb-opb @GetClass(SelectedItem) @Classes?.OperatorButton">
        @if (Sticky)
        {
            var template = GetTemplate(SelectedItem);
            if (template is not null)
            {
                @template(SelectedItem!)
            }
            else if (ItemTemplate is not null)
            {
                @ItemTemplate(SelectedItem)
            }
            else
            {
                var iconName = GetIconName(SelectedItem);
                @if (iconName.HasValue())
                {
                    <i style="@Styles?.OperatorButtonIcon" class="bit-icon bit-icon--@iconName @Classes?.OperatorButtonIcon" />
                }
                <span style="@Styles?.OperatorButtonText" class="bit-mnb-btx @Classes?.OperatorButtonText">
                    @GetText(SelectedItem)
                </span>
            }
        }
        else
        {
            @if (HeaderTemplate is not null)
            {
                @HeaderTemplate
            }
            else
            {
                @if (IconName.HasValue())
                {
                    <i style="@Styles?.Icon" class="bit-icon bit-icon--@IconName @Classes?.Icon" />
                }

                @if (Text.HasValue())
                {
                    <span style="@Styles?.Text" class="bit-mnb-btx @Classes?.Text">@Text</span>   
                }
            }
        }

        @if (Split is false)
        {
            <i style="@Styles?.ChevronDown" class="bit-icon bit-icon--@(ChevronDownIcon ?? "ChevronRight bit-ico-r90") @Classes?.ChevronDown" />
        }
    </button>

    @if (Split)
    {
        <span style="@Styles?.Separator" class="bit-mnb-spb @Classes?.Separator"></span>

        <button @onclick="OpenCallout"
                type="button"
                tabindex="@(IsEnabled ? 0 : -1)"
                style="@Styles?.ChevronDownButton"
                class="bit-mnb-chb @Classes?.ChevronDownButton">
            <i style="@Styles?.ChevronDown" class="bit-icon bit-icon--@(ChevronDownIcon ?? "ChevronRight bit-ico-r90") @Classes?.ChevronDown" />
        </button>
    }

    <div @onclick="CloseCallout" @onclick:stopPropagation
         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
         class="bit-mnb-ovl @Classes?.Overlay"></div>

    <div id="@_calloutId"
         style="@Styles?.Callout"
         class="bit-mnb-cal @Classes?.Callout">
        <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
            @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
            {
                if (Sticky && item == SelectedItem) continue;

                var template = GetTemplate(item);
                var isEnabled = GetIsEnabled(item);
                <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
                    <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
                            role="menuitem"
                            type="@_buttonType.GetValue()"
                            tabindex="@(isEnabled ? 0 : -1)"
                            disabled="@(isEnabled is false)"
                            aria-disabled="@(isEnabled is false)"
                            style="@GetStyle(item);@Styles?.ItemButton"
                            class="bit-mnb-itm @GetClass(item) @Classes?.ItemButton">
                        @if (template is not null)
                        {
                            @template(item)
                        }
                        else if (ItemTemplate is not null)
                        {
                            @ItemTemplate(item)
                        }
                        else
                        {
                            var iconName = GetIconName(item);
                            @if (iconName.HasValue())
                            {
                                <i style="@Styles?.ItemIcon" class="bit-mnb-iic bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
                            }
                            <span style="@Styles?.ItemText" class="bit-mnb-btx @Classes?.ItemText">
                                @GetText(item)
                            </span>
                        }
                    </button>
                </li>
            }
        </ul>
    </div>
</div>